<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>表格行移动</title>
    <style>
        table {
            margin: 0 auto;
            border-color: red;
            text-align: center;
        }
    </style>
</head>

<body>
    <table width="500 " border="1 " cellspacing="0 ">
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th colspan="3">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr id="shanchu">
                <td width="16% ">1</td>
                <td width="16% ">刘树臣</td>
                <td width="16% ">20</td>
                <td width="16% "><a href=" " onclick="moveUp(this) ">上移</a></td>
                <td width="16% "><a href=" " onclick="del() ">删除</a></td>
                <td width="16% "><a href="javascript:voi(0) " onclick="moveDown(this) ">下移</a></td>
            </tr>
            <tr id="shanchu">
                <td>2</td>
                <td>欧静丽</td>
                <td>24</td>
                <td><a href="javascript:void(0) " onclick="moveUp(this) ">上移</a></td>
                <td width="16% "><a href=" " onclick="del() ">删除</a></td>
                <td><a href="javascript:void(0) " onclick="moveDown(this) ">下移</a></td>
            </tr>
            <tr id="shanchu">
                <td>3</td>
                <td>李志权</td>
                <td>33</td>
                <td><a href="javascript:void(0) " onclick="moveUp(this) ">上移</a></td>
                <td width="16% "><a href=" " onclick="del() ">删除</a></td>
                <td><a href="javascript:void(0) " onclick="moveDown(this) ">下移</a></td>
            </tr>
            <tr id="shanchu">
                <td>4</td>
                <td>牛冰盒</td>
                <td>44</td>
                <td><a href="javascript:void(0) " onclick="moveUp(this) ">上移</a></td>
                <td width="16% "><a href=" " onclick="del() ">删除</a></td>
                <td><a href="javascript:void(0) " onclick="moveDown(this) ">下移</a></td>
            </tr>
            <tr id="shanchu">
                <td>5</td>
                <td>孙元俊</td>
                <td>55</td>
                <td><a href="javascript:void(0) " onclick="moveUp(this) ">上移</a></td>
                <td width="16% "><a href=" " onclick="del() ">删除</a></td>
                <td><a href="javascript:void(0) " onclick="moveDown(this) " style="color: #999; ">下移</a></td>
            </tr>
        </tbody>
    </table>
    <script type="text/javascript ">
        function moveUp(_a) {
            var a = _a.parentNode.parentNode;
            var b = a.previousSibling;
            while (b && b.nodeType != 1) {
                b = b.previousSibling;
            }
            if (b) {
                swapNode(a, b);
            }
        }

        function moveDown(_a) {
            var a = _a.parentNode.parentNode;
            var b = a.nextSibling;
            while (b && b.nodeType != 1) {
                b = b.nextSibling;
            }
            if (b) {
                swapNode(a, b);
            }
        }

        function swapNode(v1, v2) {
            var fujie = v1.parentNode;
            var fu1 = v1.nextSibling;
            var fu2 = v2.nextSibling;
            if (fu1) fujie.insertBefore(v2, fu1);
            else fujie.appendChild(v2);
            if (fu2) fujie.insertBefore(v1, fu2);
            else fujie.appendChild(v1);
        }

        function del(id) {
            if (id == id) {

            }
        }
    </script>
</body>

</html>